<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <script src="lib/esl.js"></script>
    <script src="lib/config.js"></script>
    <script src="lib/jquery.min.js"></script>
    <script src="lib/facePrint.js"></script>
    <script src="lib/testHelper.js"></script>
    <!-- <script src="ut/lib/canteen.js"></script> -->
    <link rel="stylesheet" href="lib/reset.css"/>
</head>
<body>

<div id="main0"></div>
<div id="main1"></div>
<div id="main2"></div>


<script>
    require([
        'echarts'
    ], function (echarts) {

        require(['map/js/china'], function () {
            var itemStyle = {
                normal: {
                    borderColor: 'rgba(0, 0, 0, 0.2)'
                },
                emphasis: {
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowBlur: 20,
                    borderWidth: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            };

            var option = {
                tooltip: {},
                title: {
                    text: '内蒙古 青海 没数据也要能被选中',
                    left: 'center'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['iphone3', 'iphone4', 'iphone5']
                },
                visualMap: {
                    min: 0,
                    max: 1500,
                    left: 'left',
                    top: 'bottom',
                    text: ['高', '低'],
                    calculable: true
                },
                selectedMode: 'single',
                series: [
                    {
                        name: 'iphone3',
                        type: 'map',
                        map: 'china',
                        itemStyle: itemStyle,
                        showLegendSymbol: true,
                        // zoom: 10,
                        // center: [115.97, 29.71],
                        roam: true,
                        markPoint: {
                            data: [{
                                coord: [115.97, 29.71]
                            }]
                        },
                        label: {
                            normal: {
                                show: true,
                                rotate: 40,
                                formatter: '{b}：{value|{c}}',
                                // position: 'inside',
                                backgroundColor: '#fff',
                                padding: [3, 5],
                                borderRadius: 3,
                                borderWidth: 1,
                                borderColor: 'rgba(0,0,0,0.5)',
                                color: '#777',
                                rich: {
                                    value: {
                                        color: '#019D2D',
                                        fontSize: 14,
                                        // fontWeight: 'bold'
                                        // textBorderWidth: 2,
                                        // textBorderColor: '#000'
                                    }
                                }
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        data: [
                            {name: '北京', value: Math.round(Math.random() * 1000)},
                            {name: '天津', value: Math.round(Math.random() * 1000)},
                            {name: '上海', value: Math.round(Math.random() * 1000)},
                            {name: '重庆', value: Math.round(Math.random() * 1000)},
                            {name: '河北', value: Math.round(Math.random() * 1000)},
                            {name: '河南', value: Math.round(Math.random() * 1000)},
                            {name: '云南', value: Math.round(Math.random() * 1000)},
                            {name: '辽宁', value: Math.round(Math.random() * 1000)},
                            {name: '黑龙江', value: Math.round(Math.random() * 1000)},
                            {name: '湖南', value: Math.round(Math.random() * 1000)},
                            {name: '安徽', value: Math.round(Math.random() * 1000)},
                            {name: '山东', value: Math.round(Math.random() * 1000)},
                            {name: '新疆', value: Math.round(Math.random() * 1000)},
                            {name: '江苏', value: Math.round(Math.random() * 1000)},
                            {name: '浙江', value: Math.round(Math.random() * 1000)},
                            {name: '江西', value: Math.round(Math.random() * 1000)},
                            {name: '湖北', value: Math.round(Math.random() * 1000)},
                            {name: '广西', value: Math.round(Math.random() * 1000)},
                            {name: '甘肃', value: Math.round(Math.random() * 1000)},
                            {name: '山西', value: Math.round(Math.random() * 1000)},
                            // {name: '内蒙古',value: Math.round(Math.random()*1000)},
                            {name: '陕西', value: Math.round(Math.random() * 1000)},
                            {name: '吉林', value: Math.round(Math.random() * 1000)},
                            {name: '福建', value: Math.round(Math.random() * 1000)},
                            {name: '贵州', value: Math.round(Math.random() * 1000)},
                            {name: '广东', value: Math.round(Math.random() * 1000)},
                            // {name: '青海',value: Math.round(Math.random()*1000)},
                            {name: '西藏', value: Math.round(Math.random() * 1000)},
                            {name: '四川', value: Math.round(Math.random() * 1000)},
                            {name: '宁夏', value: Math.round(Math.random() * 1000)},
                            {name: '海南', value: Math.round(Math.random() * 1000)},
                            {name: '台湾', value: Math.round(Math.random() * 1000)},
                            {name: '香港', value: Math.round(Math.random() * 1000)},
                            {name: '澳门', value: Math.round(Math.random() * 1000)}
                        ]
                    },
                    {
                        name: 'iphone4',
                        type: 'map',
                        mapType: 'china',
                        itemStyle: itemStyle,
                        showLegendSymbol: true,
                        label: {
                            normal: {
                                show: true
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        data: [
                            {name: '北京', value: Math.round(Math.random() * 1000)},
                            {name: '天津', value: Math.round(Math.random() * 1000)},
                            {name: '上海', value: Math.round(Math.random() * 1000)},
                            {name: '重庆', value: Math.round(Math.random() * 1000)},
                            {name: '河北', value: Math.round(Math.random() * 1000)},
                            {name: '安徽', value: Math.round(Math.random() * 1000)},
                            {name: '新疆', value: Math.round(Math.random() * 1000)},
                            {name: '浙江', value: Math.round(Math.random() * 1000)},
                            {name: '江西', value: Math.round(Math.random() * 1000)},
                            {name: '山西', value: Math.round(Math.random() * 1000)},
                            // {name: '内蒙古',value: 891},
                            {name: '吉林', value: Math.round(Math.random() * 1000)},
                            {name: '福建', value: Math.round(Math.random() * 1000)},
                            {name: '广东', value: Math.round(Math.random() * 1000)},
                            {name: '西藏', value: Math.round(Math.random() * 1000)},
                            {name: '四川', value: Math.round(Math.random() * 1000)},
                            {name: '宁夏', value: Math.round(Math.random() * 1000)},
                            {name: '香港', value: Math.round(Math.random() * 1000)},
                            {name: '澳门', value: Math.round(Math.random() * 1000)}
                        ]
                    },
                    {
                        name: 'iphone5',
                        type: 'map',
                        mapType: 'china',
                        itemStyle: itemStyle,
                        showLegendSymbol: true,
                        label: {
                            normal: {
                                show: true
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        data: [
                            {name: '北京', value: Math.round(Math.random() * 1000)},
                            {name: '天津', value: Math.round(Math.random() * 1000)},
                            {name: '上海', value: Math.round(Math.random() * 1000)},
                            {name: '广东', value: Math.round(Math.random() * 1000)},
                            {name: '台湾', value: Math.round(Math.random() * 1000)},
                            {name: '香港', value: Math.round(Math.random() * 1000)},
                            {name: '澳门', value: Math.round(Math.random() * 1000)}
                        ]
                    }
                ]
            };

            var chart = testHelper.create(echarts, 'main0', {
                option: option,
                height: 550
            });

            if (chart) {
                chart.on('click', function (param) {
                    console.log(param);
                });
            }
        });
    });

</script>


<script>

    require([
        'echarts'
    ], function (echarts) {

        require(['map/js/china'], function () {
            var itemStyle = {
                normal: {
                    borderColor: 'rgba(0, 0, 0, 0.2)'
                },
                emphasis: {
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowBlur: 20,
                    borderWidth: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            };
            var option = {
                tooltip: {},
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['iphone3', 'iphone4', 'iphone5']
                },
                visualMap: {
                    min: 0,
                    max: 1500,
                    left: 'left',
                    top: 'bottom',
                    text: ['高', '低'],
                    calculable: true
                },
                selectedMode: 'multiple',
                series: [
                    {
                        name: 'iphone3',
                        type: 'map',
                        map: 'china',
                        itemStyle: itemStyle,
                        showLegendSymbol: true,
                        // zoom: 10,
                        // center: [115.97, 29.71],
                        roam: true,
                        label: {
                            show: true,
                            rotate: 40,
                            formatter: '{b}：{value|{c}}',
                            backgroundColor: '#fff',
                            padding: [3, 5],
                            borderRadius: 3,
                            borderWidth: 1,
                            borderColor: 'rgba(0,0,0,0.5)',
                            color: '#934',
                            rich: {
                                value: {
                                    color: '#019D2D',
                                    fontSize: 14
                                }
                            }
                        },
                        emphasis: {
                            label: {
                                show: true,
                                backgroundColor: '#fcf'
                            },
                        },
                        data: [
                            {name: '北京', value: 234},
                            {name: '天津', value: 432},
                            {name: '新疆', value: 100},
                            {name: '陕西', value: 77},
                            {name: '西藏', value: 101},
                        ]
                    },
                    {
                        name: 'iphone4',
                        type: 'map',
                        mapType: 'china',
                        itemStyle: itemStyle,
                        showLegendSymbol: true,
                        label: {
                            show: true,
                            rotate: 90,
                            formatter: '{b}：{value|{c}}',
                            backgroundColor: '#fff',
                            padding: [3, 5],
                            borderRadius: 3,
                            borderWidth: 1,
                            borderColor: 'rgba(0,0,0,0.5)',
                            color: '#934',
                            rich: {
                                value: {
                                    color: '#019D2D',
                                    fontSize: 14
                                }
                            }
                        },
                        emphasis: {
                            label: {
                                show: true,
                                backgroundColor: '#fcf'
                            }
                        },
                        data: [
                            {name: '北京', value: 567},
                            {name: '河北', value: 321},
                            {name: '新疆', value: 100},
                            {name: '内蒙古', value: 99},
                            {name: '西藏', value: 101}
                        ]
                    }
                ]
            };

            var chart = testHelper.create(echarts, 'main1', {
                option: option,
                // recordCanvas: true,
                title: [
                    '1. 北京、天津、河北 rich text 正常倾斜（河北竖直）（其他 region 都没数据，显示 NaN）',
                    '2. selectedMode: "multiple"',
                    '3. hover 时标签底色变红',
                    '所有 label 样式一致（例外：没数据的 label 并不 rotate，因为这还没支持）'
                ]
            });

            chart && chart.on('click', function (param) {
                console.log(param);
            });
        });

    });

</script>


<script>

    require([
        'echarts'
    ], function (echarts) {

        require(['map/js/china'], function () {
            var locations = [{
                name: '上海',
                coord: [121.472644, 31.231706]
            }, {
                name: '北京',
                coord: [116.405285, 39.904989]
            }, {
                name: '广东',
                coord: [113.280637, 23.839463714285714]
            }];
            option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}'
                },
                series: [
                    {
                        name: '中国',
                        type: 'map',
                        mapType: 'china',
                        selectedMode: 'multiple',
                        label: {
                            show: true
                        }
                    }
                ]
            };
            var myChart = testHelper.create(echarts, 'main2', {
                option: option,
                height: 550,
                title: ['Animation when changing map zoom and center']
            });
            var currentLoc = 0;
            setInterval(function () {
                myChart.setOption({
                    series: [{
                        center: locations[currentLoc].coord,
                        zoom: 4,
                        data: [
                            {name: locations[currentLoc].name, selected: true}
                        ],
                        animationDurationUpdate: 1000,
                        animationEasingUpdate: 'cubicInOut'
                    }]
                });
                currentLoc = (currentLoc + 1) % locations.length;
            }, 2000);

        });

    });

</script>


</body>
</html>
